<template>
  <div>
    <el-badge
      :value="totalMessage"
      :max="99"
      class="item"
      :hidden="totalMessage > 0 ? true : false"
    >
      <i class="el-icon-download"></i>
    </el-badge>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  ...mapState({
    totalMessage: (state) => state.message.totalMessage,
  }),
  computed: {
    marginR() {
      return this.totalMessage > 0 ? "30px" : "20px";
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  margin-right: v-bind(marginR);
}
.el-icon-download {
  font-size: 20px;
  font-weight: bold;
}
:deep(.el-badge__content.is-fixed) {
  top: 10px;
}
</style>
